<template>
  <div class="ques-pop-box">
    <!-- 内容 -->
    <div class="ques-pop pop-box-item" v-show="showBoxIndex===0">
      <div class="layui-layer-title" style="cursor: move;">向理投师提问</div>
      <div class="layui-layer-content">
        <div class='tip'>
          <i class='icon'></i>
          <div class='tip-c'>
            向理投师提问注意事项：
            <p>1、理投师的回答仅代表个人观点，仅供参考；</p>
            <p>2、请向具有证券咨询资格的理投师咨询相关问题；</p>
            <p>3、投资有风险，入市须谨慎。</p>
          </div>
        </div>
        <div class='ques-c'>
          <textarea placeholder='在此输入问题' maxlength='120' id='ques_c' v-model="content"></textarea>
          <span class='num'><i num>{{content.length}}</i>/120</span>
        </div>
        <div class='ques-cl'>
          分类：
          <select v-model="category" disabled>
            <option v-for="item in categoryList" :value="item" :key="item">{{item}}</option>
          </select>
          <span class='fr'>
            <label><input type='checkbox' v-model="anonymous">匿名</label>
          </span>
        </div>
        <div class='submit'>
          <span>提交即代表同意<a href='javascript:void(0)' @click='showAgreementBox()'>《中亿理投师付费/免费服务使用协议》</a></span>
          <button class='fr' :class="{'on': content.length > 0}" ques_sub @click="submitQuestion(masterInfo.answerPay)">{{masterInfo.answerPay >  0 ? '立即支付' : '提交'}}</button>
        </div>
      </div>
      <span class="layui-layer-setwin">
        <a @click="closeQuestionBox()" class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:void(0);"></a>
      </span>
    </div>
    <!-- 支付提示 -->
    <div v-show="showBoxIndex===1" class="quiz-pop pop-box-item">
      <div class="layui-layer-title" style="cursor: move;">确认提问金额</div>
      <div id="" class="layui-layer-content">
        <div class='quiz-info-h'>
          <div class='photo-img'>
            <img :src='masterInfo.avatar' class='photo'>
            <img src='../../assets/res/img/icon_appr.png' class='appr'>
          </div>
          <div class='ftz16 name'>{{masterInfo.name}}</div>
          <div class='tip'>
            <span>擅长：{{masterInfo.field}}</span>
            <span class='line'></span>
            <span>回答数：{{masterInfo.answerCount}}</span>
          </div>
          <div class='intro'>{{masterInfo.comment}}</div>
        </div>
        <div class='quiz-info-b'>
          <div class='tip'>向Ta提问并支付</div>
          <div class='lab'><i>{{masterInfo.answerPay | moneyFormat}}</i>中亿币</div>
          <div class='tip'>若对方超过48小时未回答，费用将自动退回。</div>
          <button class='price-btn' @click="showPayTypeBox()" pop_price_btn>提交</button>
        </div>
      </div>
      <span class="layui-layer-setwin">
        <a @click="closePayBox()" class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:void(0);"></a>
      </span>
    </div>
    <!-- 支付方式选择 -->
    <div v-show="showBoxIndex==2">
      <PayType businessType="0" :questionInfo="questionPayInfo" @closeFn="closePayTypeBox"/>
    </div>
    <Agreement v-if="showAgreementFlag" @closeFn="closeAgreementBox"/>
  </div>
</template>

<script>
import PayType from '@/components/questionAnswer/pay-type'
import Agreement from '@/components/agreement/agreement'
import {
  addQuestion
} from '@/service/api'
export default {
  props: ['masterInfo'],
  components: {
    PayType,
    Agreement
  },
  data () {
    return {
      content: '',
      anonymous: false,
      showBoxIndex: 0,
      // 支付信息
      questionPayInfo: {
        businessId: 0,
        payAmount: 0.01
      },
      layerLoading: false,
      showAgreementFlag: false,
      submitting: false // 数据提交中
    }
  },
  computed: {
    balance () {
      return this.$store.state.user.balance
    },
    categoryList () {
      if (this.masterInfo) {
        return this.masterInfo.field.split(',')
      } else {
        return []
      }
    },
    category () {
      if (this.masterInfo) {
        return this.categoryList[0]
      } else {
        return ''
      }
    }
  },
  methods: {
    closeQuestionBox () {
      if (this.content) {
        window.layui.layer.open({
          content: '您已填写问题信息，但尚未提交，确定要关闭吗？',
          btn: ['确定', '取消'],
          yes: (index, layero) => {
            window.layui.layer.close(index)
            this.showBoxIndex = 0
            this.$emit('closeFn')
          },
          isOutAnim: false
        })
      } else {
        this.$emit('closeFn')
      }
    },
    showPayTypeBox () {
      this.showBoxIndex = 2
      this.questionPayInfo = {
        questionId: this.questionId, // 支付类型选择为通用组件。在某些情况下，businessId，并不一定等于 questionId。比如解锁问题时
        businessId: this.questionId,
        payAmount: this.masterInfo.answerPay
      }
    },
    closePayTypeBox () {
      this.showBoxIndex = 0
      this.$emit('closeFn')
    },
    closePayBox () {
      window.layui.layer.open({
        content: '您已填写问题信息，但尚未支付，确定要关闭吗？',
        btn: ['确定', '取消'],
        yes: (index, layero) => {
          window.layui.layer.close(index)
          this.showBoxIndex = 0
          this.$emit('closeFn')
        },
        isOutAnim: false
      })
    },
    /**
     * 需要根据接口返回的 status 信息判断是否需要支付。
     * status 值如下
     *  DELETED("-1","已删除"),
        NOT_PAID("0","未支付"),
        VERITING("3","待审核"),
        VERITY_FAILD("5","审核失败"),
        WAITING_ANSWER("10","待回答"), 不需要支付
        ANSWERED("20","已回答"),
        EXPIRED("30","已失效")
     */
    async submitQuestion (payment) {
      if (this.submitting) {
        this.showMsgTip('内容提交中……')
        return
      }
      this.submitting = true
      let questionInfo = {
        'fieldId': this.masterInfo.fieldId, // fieldId目前只有一个。不是数组形式
        'fieldName': this.category,
        'questionContent': this.content,
        'questionedUserId': this.masterInfo.id,
        'payment': payment,
        'nameShowable': this.anonymous ? 1 : 0
      }
      if (window.layer) {
        this.layerLoading = window.layer.load(0, {
          shade: false
        })
      }
      try {
        let res = await addQuestion(questionInfo)
        this.submitting = false
        window.layer.close(this.layerLoading)
        if (res.data) {
          switch (res.data.status) {
            case '-1':
              window.layui.layer.msg('提交失败, 问题已删除')
              this.$emit('submitFn')
              break
            // 需要支付
            case '0':
              this.questionId = res.data.questionId
              this.showBoxIndex = 1
              break
            // 不需要支付
            case '10':
              this.questionBoxFlag = false
              window.layui.layer.msg('问题信息已提交成功, 请等待大咖为您解答')
              this.$emit('submitFn')
              break
            case '20':
              window.layui.layer.msg('问题信息已回答')
              this.$emit('submitFn')
              break
            case '30':
              this.questionBoxFlag = false
              window.layui.layer.msg('问题信息已失效')
              this.$emit('submitFn')
              break
            // 免费提问，状态为待审核
            case '3':
              this.questionBoxFlag = false
              window.layui.layer.msg('问题信息已提交成功, 请等待审核通过')
              this.$emit('submitFn')
              break
            default:
              break
          }
          this.content = ''
        } else {
          window.layui.layer.msg('问题信息提交失败, 请重试')
        }
      } catch (aa) {
        this.submitting = false
        window.layui.layer.msg('问题信息提交失败, 请重试')
        if (window.layer) {
          window.layer.close(this.layerLoading)
        }
      }
    },
    showAgreementBox () {
      this.showAgreementFlag = true
    },
    closeAgreementBox () {
      this.showAgreementFlag = false
    }
  }
}
</script>

<style scoped lang="scss">
$icon:'../../assets/res/img/icon_re.png';
.ques-pop-box{
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right: 0;
  background-color:rgba(0, 0, 0, .3);
  z-index: 10000;
}
.pop-box-item {
  border-radius: 10px !important;
  background-color: #fff;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.ques-pop{
  width: 550px !important;
  height: 410px !important;
}
.ques-pop .layui-layer-title{
  height: 46px;
  font-size: 16px;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
}
.ques-pop .tip{
  margin: 20px 36px;
  color: #808080;
}
.ques-pop .tip .icon{
  display: inline-block;
  vertical-align: top;
  width: 78px;
  height: 78px;
  background-image: url($icon);
  background-repeat: no-repeat;
  background-position: -580px -174px;
}
.ques-pop .tip .tip-c{
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
  line-height: 22px;
}
.ques-pop .ques-c{
  width: 504px;
  height: 116px;
  margin: 0 auto;
  position: relative;
}
.ques-pop .ques-c textarea{
  width: 470px;
  height: 94px;
  resize: none;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  line-height: 20px;
  padding: 10px 16px;
}
.ques-pop .ques-c .num{
  color: #808080;
  position: absolute;
  bottom: 12px;
  right: 12px;
}
.ques-pop .ques-cl{
  margin: 10px auto;
  width: 502px;
  color: #808080;
}
.ques-pop .ques-cl select{
  padding: 0 6px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid #e6e6e6;
  color: #808080;
}
.ques-pop .ques-cl input[type='checkbox']{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background-image: url($icon);
  background-repeat: no-repeat;
  background-position: -723px -199px;
  margin-right: 3px;
}
.ques-pop .ques-cl input[type='checkbox']:checked{
  background-position: -751px -199px;
}
.ques-pop .submit{
  margin: 0 auto;
  width: 502px;
}
.ques-pop .submit span{
  color: #808080;
  line-height: 46px;
}.ques-pop .submit span a{
  color: #1b74ce;
}
.ques-pop .submit button{
  width: 100px;
  height: 40px;
  border-radius: 19px;
  color: #fff;
  background-color: #A6A6A6;
  vertical-align: middle;
  pointer-events: none;
  &.on {
    pointer-events: auto;
    background-color:  #f04e2d;
  }
}

.quiz-pop{
  width: 400px !important;
  height: 448px !important;
}
.quiz-pop .layui-layer-title{
  height: 46px;
  font-size: 16px;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
}
.quiz-pop .quiz-info-h{
  padding: 12px 40px;
  border-bottom: 1px solid #e6e6e6;
}
.quiz-pop .quiz-info-h .photo-img{
  width: 80px;
  height: 80px;
  position: relative;
  margin: 0 auto;
}
.quiz-pop .quiz-info-h .photo{
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.quiz-pop .quiz-info-h .photo-img .appr{
  position: absolute;
  right: 14px;
  bottom: 0;
}
.quiz-pop .quiz-info-h .name{
  text-align: center;
  font-weight: bold;
  margin: 10px 0;
}
.quiz-pop .quiz-info-h .tip{
  text-align: center;
  color: #808080;
}
.quiz-pop .quiz-info-h .tip .line{
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 14px;
  background-color: #e6e6e6;
  margin: -4px 14px 0 14px;
}
.quiz-pop .quiz-info-h .intro{
  margin-top: 14px;
  line-height: 22px;
  height: 44px;
  overflow: hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.quiz-pop .quiz-info-b .tip{
  text-align: center;
  color: #808080;
  margin: 10px 0;
}
.quiz-pop .quiz-info-b .lab{
  width: 318px;
  height: 44px;
  text-align: center;
  margin: 0 auto;
  line-height: 44px;
  border-radius: 5px;
  background-color: #f3f3f3;
}
.quiz-pop .quiz-info-b .lab i{
  font-size: 16px;
  font-weight: bold;
  color: #f04e2d;
  margin-right: 6px;
}
.quiz-pop .quiz-info-b .price-btn{
  width: 90px;
  height: 40px;
  color: #fff;
  border-radius: 20px;
  background-color: #f04e2d;
  margin: 14px auto;
  display: block
}
</style>
